<template>
  <div class="explore-page flex">
    <div
      class="list-card-container"
      v-for="item in videoList"
      :key="item.id"
      @click="clickListCard(item)"
    >
      <ListCard :video="item" />
    </div>

    <el-dialog
      v-model="dialogTableVisible"
      width="900"
      align-center
      :show-close="false"
    >
      <VideoPage :video="tempItem" />
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import emmiter from "@/utils/event-bus.js";
import axios from "axios";
import ListCard from "@/components/ListCard.vue";
import VideoPage from "@/pages/video/VideoPage.vue";

const dialogTableVisible = ref(false);
const videoList = ref([]);
const tempItem = ref({});

onMounted(() => {
  getVideoList();
});

emmiter.on("changeSearch", (value) => {
  console.log("接收到的值=》", value);
  getVideoList();
});

const clickListCard = (item) => {
  dialogTableVisible.value = true;
  tempItem.value = item;
};

// 获取视频数据
const getVideoList = () => {
  axios.get("http://localhost:8080/api/video").then((res) => {
    console.log("mock数据=》", res.data.data);
    if (res.status === 200) {
      videoList.value = res.data.data;
    }
  });
};
</script>

<style lang="scss" scoped>
.explore-page {
  flex-wrap: wrap;
  height: calc(100vh - 72px - 100px);
  .list-card-container {
    margin: 16px 10px;
  }
}

::v-deep .el-dialog {
  border-radius: 20px;
  background-color: var(--color-background);
}
</style>